import {
  FormControl,
  InputAdornment,
  InputLabel,
  Select
} from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog/Dialog";
import DialogActions from "@material-ui/core/DialogActions/DialogActions";
import DialogContent from "@material-ui/core/DialogContent/DialogContent";
import Input from "@material-ui/core/es/Input/Input";
import Grid from "@material-ui/core/Grid/Grid";
import createStyles from "@material-ui/core/styles/createStyles";
import withStyles, {
  StyleRules,
  WithStyles
} from "@material-ui/core/styles/withStyles";
import * as React from "react";
import { AppPageProps } from "../../types/AppPageProps";
import CardHeader from "../mymedicalcard/CardHeader";

const styles: StyleRules = {
  cardButtomMy: {
    marginTop: "20px",
    width: "100%"
  },
  cardInputNew: {
    marginRight: "5px"
  },
  formTop: {
    marginTop: 30
  },
  root: {}
};
interface props extends WithStyles<typeof styles>, AppPageProps {}
interface ststes {
  dialog: boolean;
  name: string;
  idCard: string;
  sex: string;
  cardNumber: string;
  hospital: string;
  note: string;
  phoneNumber: string;
  verificationCode: string;
}

class NewMedicalCard extends React.Component<props, ststes> {
  constructor(props: props) {
    super(props);
    this.state = {
      dialog: false,
      name: "",
      idCard: "",
      sex: "",
      cardNumber: "",
      hospital: "",
      note: "",
      phoneNumber: "",
      verificationCode: ""
    };
  }
  public componentWillMount() {}
  public openDialog = () => {
    this.setState({ dialog: true });
  };
  public closeDialog = () => {
    this.setState({ dialog: false });
    this.props.history.goBack();
  };
  public handleChange = (event: any) => {
    // @ts-ignore
    this.setState({ [event.target.name]: event.target.value });
  };
  public render() {
    const { classes } = this.props;
    return (
      <div>
        <CardHeader title={"新增就诊卡"} diplayButton={false} />
        <div className={classes.formTop}>
          <Grid container={true} justify={"center"} item={true} xs={12}>
            <div style={{ width: "50vw" }}>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>用户姓名</InputLabel>
                <Input
                  error={true}
                  name={"name"}
                  value={this.state.name}
                  onChange={this.handleChange}
                />
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>身份证号</InputLabel>
                <Input
                  value={this.state.idCard}
                  name={"idCard"}
                  onChange={this.handleChange}
                />
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>用户性别</InputLabel>
                <Select
                  name={"sex"}
                  value={this.state.sex}
                  onChange={this.handleChange}
                >
                  <option value={1} selected={true}>
                    男
                  </option>
                  <option value={2}>女</option>
                </Select>
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>就诊卡号</InputLabel>
                <Input
                  value={this.state.cardNumber}
                  name={"cardNumber"}
                  onChange={this.handleChange}
                />
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>注册医院</InputLabel>
                <Select
                  name={"hospital"}
                  value={this.state.hospital}
                  onChange={this.handleChange}
                >
                  <option value={1}>男</option>
                  <option value={2}>女</option>
                </Select>
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>备注名称</InputLabel>
                <Input
                  value={this.state.note}
                  name={"note"}
                  onChange={this.handleChange}
                />
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>联系方式</InputLabel>
                <Input
                  value={this.state.phoneNumber}
                  name={"phoneNumber"}
                  onChange={this.handleChange}
                />
              </FormControl>
              <FormControl fullWidth={true} className={classes.formControl}>
                <InputLabel>验证码</InputLabel>
                <Input
                  value={this.state.verificationCode}
                  name={"verificationCode"}
                  onChange={this.handleChange}
                  endAdornment={
                    <InputAdornment position="end">
                      <Button
                        variant="contained"
                        color="primary"
                        size={"small"}
                      >
                        获取
                      </Button>
                    </InputAdornment>
                  }
                />
              </FormControl>
              <Button
                variant="contained"
                color={"primary"}
                className={classes.cardButtomMy}
                onClick={this.openDialog}
              >
                {"确定新增"}
              </Button>
            </div>
          </Grid>
        </div>
        <Dialog maxWidth={"xs"} open={this.state.dialog}>
          <DialogContent>
            <div style={{ width: "50vw", textAlign: "center" }}>添加成功</div>
          </DialogContent>
          <DialogActions>
            <Button color="primary" onClick={this.closeDialog}>
              确定
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default withStyles(createStyles(styles))(NewMedicalCard);
